<template>
  <div class="comment-container">
    <h3>发表评论</h3>
    <hr />
    <textarea
      placeholder="请输入要评论的内容（最多吐槽120字）"
      maxlength="120"
      v-model="msg"
    ></textarea>
    <mt-button type="primary" size="large" @click="postComment"
      >发表评论</mt-button
    >
    <div class="cmt-list" v-for="(item, i) in comments" :key="item.add_time">
      <div class="cmt-item">
        <div class="cmt-title">
          第{{ i + 1 }}楼&nbsp;&nbsp;用户：{{
            item.user_name
          }}&nbsp;&nbsp;发表时间：{{
            item.add_time | dateFormat('YYYY 年 MM 月 DD 日')
          }}
        </div>
        <div class="cmt-body">
          {{ item.content === 'undefined' ? '评论为空~~' : item.content }}
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="getMore"
      >加载更多</mt-button
    >
  </div>
</template>
<script>
  import { Toast } from 'mint-ui'
  export default {
    data() {
      return {
        pageIndex: 1, //默认第一页评论
        comments: [], //获取评论数组
        commentLength: 0,
        thisLength: 0, //初始化当前数据条数
        msg: [], //评论内容
      }
    },
    created() {
      this.getComments()
    },
    methods: {
      getComments() {
        this.$axios
          .get(`./json/comments.json?` + this.id + `?pageindex=` + this.pageIndex)
          .then((result) => {
            if (result.data.status === 0) {
              //this.comments = this.comments.concat(result.data.message)//老数组拼接新数组
              this.commentLength = this.thisLength
              this.comments = result.data.message.slice(0, this.pageIndex * 3) //成功,这里是获取全部数据
              this.thisLength = this.comments.length
              if (this.thisLength == this.commentLength) {
                Toast('数据全部加载完毕！')
              }
            } else {
              Toast('获取评论失败！')
            }
          })
      },
      getMore() {
        this.pageIndex++
        this.getComments()
      },
      postComment() {
        //发表评论
        //post中参数1是URL，参数2提交给服务器的数据对象{content:this.msg}，参数3定义提交时候表单数据格式{emulateJSON:true}
        //也可以在main.js中配置上传数据为json格式：Vue.http.options.emulateJSON = true
        //this.$axios.post(`url`+$route.params.id,{content:this.msg.trim()}).then(result=>{})
        //校验是否为空内容
        if (this.msg.trim().length === 0) {
          return Toast('评论内容不能为空！')
        }
        //拼接一个评论对象
        var cmt = {
          user_name: '匿名用户',
          add_time: Date.now(),
          content: this.msg.trim(),
        }
        this.comments.unshift(cmt)
        this.msg = ''
      },
    },
    props: ['id'],
  }
</script>
<style lang="scss" scoped>
  .comment-container {
    h3 {
      font-size: 18px;
      text-align: left;
    }
    textarea {
      font-size: 14px;
      height: 85px;
      margin: 0;
    }
    .cmt-list {
      margin: 5px 0;
      .cmt-item {
        font-size: 13px;
        .cmt-title {
          line-height: 35px;
          background-color: #ccc;
        }
        .cmt-body {
          line-height: 35px;
          text-indent: 2rem;
        }
      }
    }
  }
</style>